<!--
 * @Descripttion:
 * @Copyright: 武汉一一零七科技有限公司©版权所有
 * @Link: 1074699502@qq.com
 * @Contact: QQ:1074699502
 * @LastEditors: 梧桐
 * @LastEditTime: 2020-11-14 21:55:36
-->
<template>
	<view class="goodsWrap" @click.stop="getnav('/pagesC/goods/goodsDetails?id='+info.id)">
		<slot></slot>
		<u-image width="100%" height="350rpx" :src="info.thumb_url" border-radius="8rpx 8rpx 0 0">
		</u-image>

		<view class="priceWrap">
			<p class="name"> <text v-if="info.leixing === 1" class="badeg-self">自营</text>
				<text v-if="info.entity_check === '0'" class="badeg-self">快递</text>
				<text v-if="info.entity_check === '2'" class="badeg-self">同城</text>
				{{ info.goods_name }}
			</p>
			<view>
				<u-tag v-if="info.is_activity == 1" class="tag" text="秒杀" mode="plain" type="error" size="mini"
					color="#fa3f3f" border-color="#fa3f3f" />
				<u-tag v-if="info.is_activity == 2" class="tag" text="积分换购" mode="plain" type="error" size="mini"
					color="#fa3f3f" border-color="#fa3f3f" />
				<u-tag v-if="info.is_activity == 3" class="tag" text="拼团" mode="plain" type="error" size="mini"
					color="#fa3f3f" border-color="#fa3f3f" />
				<u-tag v-if="info.is_live == 1" class="tag" text="LIVE" mode="plain" type="info" size="mini" />
			</view>
			<view class="bottom">
				<view v-if="info.is_activity != 2" :style="info.price_color" class="goodsPrice"><text
						class="rmb">¥</text>{{ info.zs_price }}</view>
				<view v-if="info.is_activity == 2" class="goodsPrice">积分{{info.integral}}+<text
						class="rmb">¥</text>{{ info.zs_price }}</view>
				<p class="name"> <text class="badeg-self2">销量</text>{{ info.sale_num }}</p>
				<view class="moreAction" v-if="false">···</view>
			</view>
			<view class="bottom1">
				<!-- <view class="productBuyBtn" @click.stop="buyNow(true, '')" v-if="info.hasoption && info.is_activity != 2"> -->
				<!-- <view class="productBuyBtn" @click.stop="buyNow(true, '')" >
				  {{ $t('选择规格') }}
				  <view v-if="info.goods_num > 0" class="badge">{{ info.goods_num }}</view>
				</view>
				 -->

				<!-- 无规格或只有一个规格，点击切换输入框显示 -->
				<view class="attr-select-icon bottom-actions"
					v-if="info.formatSpecList === false || info.formatSpecList && info.formatSpecList.length ==1 && info.formatSpecList[0].list&& info.formatSpecList[0].list.length == 1">
					<view style="display: inline" @click.stop="hanleShowNumChange(info)">

						<uni-badge :text="info.goods_num" absolute="rightTop" size="small" :offset="[4, 4]"
							v-if="!changeNumVisible">
							<uni-icons color="#ff9900" type="plus-filled" size="30"></uni-icons>
						</uni-badge>
						<view @click.capture="(e) => animationAddCart(e)" v-else>
							<uni-number-box class="card-number-box" :value="info.goods_num"
								@change="(e) => handleSubmitAddToCart(e, info)" :min="0" />
						</view>
					</view>

				</view>
				<!-- <view class="bottom-actions"
					v-if="info.formatSpecList === false || info.formatSpecList && info.formatSpecList.length ==1 && info.formatSpecList[0].list&& info.formatSpecList[0].list.length == 1">
					<view @click.capture="(e) => animationAddCart(e)">
						<uni-number-box :value="info.cartCount || 0" background="#2979FF" color="#fff"
							@change="(e) => handleSubmitAddToCart(e, info)" :min="0" />
					</view>
				</view> -->
				<!-- 有规格点击显示弹出层 -->
				<view class="attr-select-icon" v-else>
					<view style="display: inline" @click.stop="buyNow(true, '')">
						<uni-badge :text="cartNum" absolute="rightTop" size="small" :offset="[4, 4]">
							<uni-icons color="#ff9900" type="plus-filled" size="30"></uni-icons>
						</uni-badge>
					</view>
				</view>


			</view>

			<text class="onlyone-attr-info"
				v-if="info.formatSpecList&& info.formatSpecList.length == 1 && info.formatSpecList[0].list && info.formatSpecList[0].list.length == 1">
				<!-- {{info.formatSpecList[0]?.list[0]?.title}} -->
				{{info.formatSpecList[0].title}}:{{info.formatSpecList[0].list[0].title}}
				<!-- {{setDefaultSpec(info)}} -->
			</text>
		</view>

		<popup-layer ref="popupRef" :direction="'top'" @on-close="closePopup">

			<view class="popup-coupon" v-show="PopupIndex==5">
				<view class="grace-product-attr">
					<form @submit="attrSubmit" class="grace-form">
						<!-- 关闭按钮  -->
						<!-- <view class="grace-product-attr-close" @click="closeAttr">
							<text class="grace-iconfont icon-close2"></text>
						</view> -->
						<!-- 头部商品信息 -->
						<!-- <view class="grace-product-attr-info" style="height:240rpx;">
	          <image :src="product.thumb_url" @click="previewImgs([{img_url:product.thumb_url}])"
	                 style="width:200rpx;height:200rpx"></image>
	          <view class="title">
	            <div
	                style="color:#FF1212;font-size:40rpx;dispaly:inline-block;margin: 0;padding: 0">
												<span v-if="product.is_activity == 0 || product.is_activity == 1">
													￥{{js_shop_price}}
												</span>
	              <span v-if="product.is_activity == 2">
													<span></span> {{ product.integral }}{{ $t('积分') }}+{{ $t('￥') }}{{ product.zs_shop_price }}
												</span>
	              <span v-if="product.is_activity == 3 && isPT == 1">
													￥{{ activity_info.dandu_button_price }}
												</span>
	              <span v-if="product.is_activity == 3 && isPT == 2">
													￥{{ product.zs_market_price }}
												</span>
	              <span class="tag-name"
	                    v-if="product.is_activity == 3 &&(isPT == 2 || isPT == '')">{{ $t('拼团') }}</span>
	
	              <text class="activity_info tag-name"
	                    v-if="product.is_activity == 1">{{ $t('秒杀') }}
	              </text>
	            </div>
	
	            <div style="font-size:24rpx;line-height:60rpx;">{{ $t('库存') }} : {{ stock }}{{ $t('件') }}</div>
	            <view>{{ selectText }} {{ guige }}</view>
	          </view>
	        </view> -->
						<!-- 属性列表区 -->
						<view style="overflow-y:auto;">
							<view class="grace-product-attr-list" v-for="(item,index) in specList" :key="index">
								<view class="title">{{ item.title }}</view>
								<view class="grace-select-tips">
									<view name="type" class="select">
										<view class="select-items u-m-8"
											@click="changeSpec(item.title, its.name, its.able, its.id, index)"
											v-for="(its, ins)  in item.list"
											:class="[its.able == false ? 'disable-spec-tiem' : its.check == true ? 'grace-checked-color3' : '']">
											<image v-if="its.thumb" class="img" :src="its.thumb" />
											{{ its.name }}
										</view>
									</view>
								</view>
							</view>
							<view class="grace-items" style="margin-top:8px;">
								<view class="grace-label">{{ $t('购买数量') }}</view>
								<!-- input 用于记录购买数量隐藏形式并参与表单提交 -->

								<uni-number-box v-if="info.is_activity === 1" :value="buyNum" :min="1"
									:max=" activity_info == '' ? 10000: activity_info.xznum"
									v-on:change="buyNumChange"></uni-number-box>
								<uni-number-box v-else :value="buyNum" :min="1" :max="1000000"
									v-on:change="buyNumChange"></uni-number-box>
							</view>
						</view>
						<view class="pt-tip" v-if="isPT == 2 && info.is_activity != 3">
							{{ $t('抱歉所选商品规格不能发起拼团，仅支持单独购买') }}
						</view>
						<view class="grace-product-attr-btn btn-group" v-if="isPT == '' && info.is_activity != 3">
							<button class="flex1" type="warn" @click="submitOrder(true, '')">加入购物车</button>
							<button type="warn" class="flex1 right-htn" @click="submitOrder(false, 1)"
								style="margin-left: 20rpx;">{{ $t('立即购买') }}
							</button>
						</view>

						<view class="grace-product-attr-btn" v-if="isPT == 1">
							<button type="warn" @click="submitOrder(false, 1)">{{ $t('单独购买') }}</button>
						</view>
						<view v-if="isPT == 2 && info.is_activity != 3"></view>
						<view class="grace-product-attr-btn flex" v-if="isPT == 2">
							<button type="warn" class="flex1" v-if="info.is_activity == 3"
								@click="submitOrder(false, 2)">{{ getBtnText }}
							</button>

							<button type="warn" @click="submitOrder(true, '')" class="flex1"
								v-if="info.is_activity != 3">{{ $t('加入购物车') }}
							</button>
							<button type="warn" class="flex1 right-htn" @click="submitOrder(false, 1)"
								v-if="info.is_activity != 3" style="margin-left: 20rpx;">{{ $t('立即购买') }}
							</button>

						</view>
					</form>
				</view>
			</view>
		</popup-layer>
		<view id="animation-el" v-show="animationElStatus" :style="animationElStatus">
			<img :src="info.thumb_url" />
		</view>
	</view>
</template>

<script>
	import uniNumberBox from 'components/uni-number-box.vue'
	import shareMask from '@/components/shareMask'
	import _app from '@/js_sdk/QuShe-SharerPoster/QS-SharePoster/app.js';
	import {
		getSharePoster
	} from '@/js_sdk/QuShe-SharerPoster/QS-SharePoster/QS-SharePoster.js';
	import {
		debounce
	} from '@/utils/index.js'
	let pinid, canvasImg = '';
	let shopId = null // 商品 id
	let arr = []
	let buyNowNum = ''
	//记录用户选择的属性
	let strRadio = []
	var dateObj = new Date();

	export default {
		name: "goodsCard",
		components: {
			uniNumberBox,
			shareMask
		},
		props: {
			info: {
				type: Object,
				default: function() {
					return {}
				}
			}
		},
		data() {
			return {
				imgSTATICURL: this.STATICURL,
				heightImg: '330px',
				datainfo: {
					goods_param: [],
					share_url: ''
				},
				isJoinBuyTeam: false,
				swiperItems: [], // 轮播图
				product: '', // 商品详情
				goodsThumb: '',
				shopinfos: '', // 商家店铺
				guige: '',
				couponinfos: '', // 商品优惠券
				huodong: '', // 活动
				sertions: '', // 服务
				specs: [], // 商品属性
				getcouponlst: [], //优惠券列表
				huodonginfo: '', // 活动促销列表
				serlst: [], // 商品服务列表
				goodsId: null, // 商品 id
				activity_info: '', // 限时秒杀
				active: 1,
				stock: 0, //  获取库存信息
				buyNum: 1,
				isSelectAttr: 0, // 是否选择规格
				js_shop_price: 0, //累计商品价格
				activity_time: {}, // 秒杀时间
				pin_id: '',
				tuan_id: '',
				PopupIndex: 0,
				userList: [],
				userCartNum: 0,
				choosePinNum: '',
				isPT: '',
				isJoin: false,
				skeleton: 'show',
				isMPWixin: false,
				valueStatus: 0, // 更新页面状态 防止页面卡死
				GoodsCommentList: [],
				currentIndex: 0,
				tmeImg: '',
				swiperIndex: 0,
				joinAGroup: {},
				selectText: '',
				specList: [],
				skuList: [],
				selectSpec: {}, // 选择数据的对象 将已选的数据放在这个对象里面记录下来
				commentTotal: 0,
				background: {
					backgroundColor: '#f43530'
				},
				headTablist: [{
						name: this.$t('商品'),
						selector: '.swiper',
					},
					{
						name: this.$t('详情'),
						selector: '.goodsDetailsImgs',
					}
				],
				headTabCurrent: 0,
				scrollTop: 0,
				isReady: false,
				poster: {},
				posterImage: '',
				canvasId: 'default_PosterCanvasId',
				source: '', //页面来源
				myuserinfo: {},
				inviterInfo: {},
				inviterID: '',
				wecode: '',
				animationElStatus: ``,
				changeNumVisible: false,
				cartNum: 0


			}
		},
		computed: {
			tagList() {
				return [
					'自营',
					'秒杀',
					'团购',
					'拼团',
				]
			},

		},

		methods: {
			buyNow: function(type, status) {
				const tts = Math.floor(Date.now() / 1000);
				let bst = this.info.ban_start_time;
				let bet = this.info.ban_end_time;
				// 改价期间禁止下单
				if (bst != null && bet != null) {
					if (tts >= bst && tts <= bet) {
						this.$toast('商城价格更新中，暂停下单!')
						return
					}
				}
				if (type) {
					if (this.info.goods_type == 2) {
						this.$toast('该商品类型为预约到店，不可加入购物车,请直接购买')
						return
					}
				}
				if (this.getBtnText === this.$t('邀请好友') && type !== 'guige' && status === 2) {
					// this.getnav(`/pagesC/homeSon/invite?pin_id=${this.pin_id}&tuan_id=${this.tuan_id}`)
					return false
				}
				if (type === 'guige' && this.info.is_activity == 3) return

				//回显购物车商品数
				this.buyNum = this.info.goods_num;

				// 如果商品有多规格，单独购买、拼团购买时重新获取商品规格库存
				// && (status == 1 || status == 2)
				// if (this.info.hasoption) {
				if (this.info) {
					console.log(status)
					let type = 'normal'
					this.$http.getGoodsInfo({
						goods_id: this.info.id,
					}).then(res => {
						if (res.status == 200) {
							this.datainfo = res.data
							this.product = res.data.goodsinfo
							this.originSpecList = res.data.formatSpecList
							this.specList = res.data.formatSpecList
							this.skuList = res.data.formatSkuList


							if (this.specList.length > 0) {
								// 初始化选择数据的对象
								this.specList.forEach(item => {
									this.$set(this.selectSpec, item.title, "");
								})
								// 将规格数据处理成我们视图所需要的数据类型
								this.specList = this.specList.map(item => {
									return {
										title: item.title,
										list: item.list.map(its => {
											return {
												id: its.id,
												name: its.title,
												thumb: its.thumb,
												// 判断是否可以选择
												able: this.isAble(item.title, its
													.title
												) // 注释的调试看逻辑代码 false
											}
										})
									}
								})
							}

						}

					})

				}

				this.PopupIndex = 5
				this.isPT = status
				this.$refs.popupRef.show() // 弹出
				buyNowNum = type // true加入购物车，  false直接购买b

			},

			closeAttr: function() {
				this.isJoin = false
				this.$refs.popupRef.close() // 关闭
			},

			closePopup() {
				this.isJoin = false
			},

			buyNumChange: function(data, id) {

				if (this.isSelectAttr == 0) {
					this.$toast('请先选择规格！');
					return
				}
				this.buyNum = data;
				console.log(this.buyNum);
				// this.js_shop_price = (this.product.zs_shop_price * data).toFixed(2);
			},


			// 判断规格是否可以被选择  核心函数 key当前的规格的title   value规格值
			isAble(key, value) {
				// 深拷贝 避免被影响
				var copySelectSpec = JSON.parse(JSON.stringify(this.selectSpec));
				// 用对象的好处就在这了 直接赋值当前验证项
				copySelectSpec[key] = value;
				// 用数组的 some 方法 效率高 符合条件直接退出循环
				let flag = this.skuList.some(item => {
					// 条件判断 核心逻辑判断
					// console.log(item)
					var i = 0;
					// 这个for in 原理就是循环已经选中的 和 正在当前对比的数据 和 所有的sku对比 只有当前验证的所有项满足sku中的规格或者其他规格为空时 即满足条件 稍微有点复杂 把注释的调试代码打开就调试下就可以看懂了
					for (let k in copySelectSpec) {
						//  console.log(copySelectSpec[k])  // 注释的调试看逻辑代码
						if (copySelectSpec[k] != "" && item.specs.includes(copySelectSpec[k])) {
							// console.log(item)
							i++
						} else if (copySelectSpec[k] == "") {
							i++;
						}
					}
					// 符合下面条件就退出了 不符合会一直循环知道循环结束没有符合的条件就 return false 了
					// console.log(i) // 注释的调试看逻辑代码
					return i == this.specList.length
				})
				return flag
			},


			changeSpec(key, value, able, spec_item_id, index) {
				if (!able) return
				if (this.selectSpec[key] === value) {
					this.selectSpec[key] = ''
				} else {
					this.selectSpec[key] = value
				}
				console.log(this.selectSpec, key)
				// forEach循环改变原数组
				this.specList.forEach(item => {
					item.list.forEach(its => {
						its.able = this.isAble(item.title, its.name);
					});
				});


				let radioObject = this.specList
				strRadio = []
				let guigearr = []

				for (var i = 0; i < radioObject[index].list.length; i++) {
					if (radioObject[index].list[i].id == spec_item_id) {
						if (radioObject[index].list[i].thumb) {
							this.info.thumb_url = radioObject[index].list[i].thumb + "?" + Math.random()
						} else {
							this.info.thumb_url = this.info.thumb_url + "?" + Math.random()
						}
						radioObject[index].list[i].check = true;
					} else {
						radioObject[index].list[i].check = false;
					}
				}
				let specLengthArr = [];
				let temp = '';
				let tempStr = '';
				for (var i = 0; i < radioObject.length; i++) {
					specLengthArr.push(radioObject[i].list.length)
					for (var j = 0; j < radioObject[i].list.length; j++) {
						if (radioObject[i].list[j].check && radioObject[i].list[j].check == true) {
							strRadio.push(radioObject[i].list[j].id)
							if (!guigearr.includes(radioObject[i].title + ":" + radioObject[i].list[j]
									.name)) {
								guigearr.push(radioObject[i].title + ":" + radioObject[i].list[j].name)
							}
						}
					}
				}

				if (radioObject.length == strRadio.length) {
					// 将选中的商品规格id重新排序，与后端保持一致
					for (var i = 0; i < specLengthArr.length - 1; i++) {
						if (specLengthArr[i] > specLengthArr[i + 1]) {
							temp = specLengthArr[i]
							specLengthArr[i] = specLengthArr[i + 1]
							specLengthArr[i + 1] = temp
							tempStr = strRadio[i]
							strRadio[i] = strRadio[i + 1]
							strRadio[i + 1] = tempStr
						}
					}

					this.selectText = this.$t('已选')
					this.$http.getGoodsPrice({
						goods_attr: strRadio.join('_'),
						goods_id: this.info.id,
						fangshi: this.isPT != 1 && this.info.is_activity == 3 ? 2 : 1,
						pin_number: this.choosePinNum
					}).then(res => {
						if (res.status == 200) {
							this.stock = res.data.attrinfos.stock
							this.pin_id = res.data.pin_id
							this.tuan_id = res.data.tuan_id
							this.guige = guigearr.join(';')
							this.isJoin = false
							this.userList = res.data.memberpinres
							if (res.data.activity_info.length != 0) {
								this.activity_info = res.data.activity_info
							}
							this.buyNum = 1
							this.isSelectAttr = 1
							// if ((res.data.fangshi != 1 && this.isPT != 1) || !this.isPT || this.isPT == 2 &&
							// 	res.data.fangshi == 1) {
							// 	this.info.is_activity = res.data.attrinfos.is_activity
							// }

							this.info.goods_name = res.data.attrinfos.goods_name
							this.info.zs_shop_price = res.data.attrinfos.zs_shop_price
							this.js_shop_price = res.data.attrinfos.zs_shop_price
							if (this.isPt = 1) {
								this.activity_info.dandu_button_price = res.data.attrinfos.zs_shop_price
							}
							if (this.isPt = 2) {
								this.info.zs_market_price = res.data.attrinfos.zs_shop_price
							}

						}
					})
				}

			},

			submitOrder(status, type) {
				//1.判断是否登录
				let isLogin = this.getIsLogin()
				if (!isLogin) {
					return false
				}
				//2.判断是否已选择商品规格
				console.log('this.isSelectAttr-----', this.isSelectAttr)
				if (this.isSelectAttr == 0) {
					this.$toast('请选择规格！');
					return
				}

				if (this.getBtnText === this.$t('邀请好友') && type !== 'guige' && type === 2) {
					// this.getnav(`/pagesC/homeSon/invite?pin_id=${this.pin_id}&tuan_id=${this.tuan_id}`)
					return false
				}
				buyNowNum = status
				this.attrSubmit(type)
				this.$refs.popupRef.close() // 弹出
				this.handleUpdateCardInfo(this.buyNum)
			},
			// 确认属性
			attrSubmit: function(type) {
				//后续操作
				let data = {}
				if (this.getBtnText === this.$t('立即参团')) {
					data = {
						goods_id: this.info.id,
						goods_attr: strRadio.join('_'),
						num: this.buyNum,
						fangshi: 2,
						pin_number: this.choosePinNum,
						goods_from: 1
					}
				} else {
					data = {
						goods_id: this.info.id,
						goods_attr: strRadio.join('_'),
						num: this.buyNum,
						fangshi: type,
						goods_from: 1
					}
				}

				this.$loading()
				if (buyNowNum) {
					this.$http.getaddcart(data).then(res => {
						if (res.status == 200) {
							this.$toast(res.mess)
							//关闭
							this.$store.dispatch('contentnum')
							this.$refs.popupRef.close() // 关闭

							setTimeout(() => {
								this.userCartNum = this.$store.state.userCartNum
							}, 800)
						}
					})
				} else {
					this.$http.getpurbuy(data).then(res => {
						if (res.status == 200) {
							//如果快递和同城商品同时存在，优先走同城
							let abc = [...this.datainfo.goodsinfo.entity_check];
							let gType = this.product.goods_type;

							if (abc.includes("2")) {
								let tcPrice = parseFloat((this.product.zs_shop_price * data.num).toFixed(2));
								this.getnav(
									`/pagesC/order/confirmOrder?pur_id=${res.data.pur_id}&type=1 &fangshi=${res.data.fangshi}&pin_number=${res.data.pin_number}&goods_type=${this.product.goods_type}&tcType=3 &tcPrice=${tcPrice} &cartFree=${res.data.cart_free}`
								)
							} else if (gType == 1 && abc.length == 1 && abc.includes("1")) {
								this.getnav(
									`/pagesC/order/confirmOrder?pur_id=${res.data.pur_id}&type=1 &fangshi=${res.data.fangshi}&pin_number=${res.data.pin_number}&goods_type=2`
								)
							} else {
								this.getnav(
									`/pagesC/order/confirmOrder?pur_id=${res.data.pur_id}&type=1 &fangshi=${res.data.fangshi}&pin_number=${res.data.pin_number}&goods_type=${this.product.goods_type}`
								)
							}
						}
					})
				}

			},

			getIsLogin() {
				if (!uni.getStorageSync('token')) {
					// #ifdef MP-WEIXIN
					uni.switchTab({
						url: '/pages/tabBar/my'
					});
					// #endif
					// #ifndef MP-WEIXIN
					uni.redirectTo({
						url: '/pagesB/login/login'
					});
					// #endif
					return false
				}
				return true
			},



			handleSubmitAddToCart: debounce(function(num, info) {
				if (num == 0) {
					// 删除购物车
					
					this.changeNumVisible = false
					// this.$http.getdelcart({
					// 	goods_id: info.goods_id,
					// 	homepage: true
					// }).then(res => {
					// 	if (res.status == 200) {
					// 		this.changeNumVisible = false
					// 		this.info.goods_num = 0
					// 	}
					// })

				} else {
					let specList = []
					if (info.formatSpecList && info.formatSpecList.length == 1 && info.formatSpecList[0].list &&
						info
						.formatSpecList[0].list.length == 1) {
						// 单个属性
						specList.push(info.formatSpecList[0]['list'][0].id)
					} else {
						// this.changeSpec(item.title, its.name, its.able, its.id, index)
					}
					let params = {
						goods_id: info.id,
						goods_attr: specList && specList.length && specList.join('_'),
						num: num,
						fangshi: null,
						goods_from: 1,
						simple: true
					}
					
					console.log('params======', params)
					this.$http.getaddcart(params).then(res => {
						if (res.status == 200) {
							this.$toast(res.mess)
							//关闭
							this.$store.dispatch('contentnum')
							this.$refs.popupRef.close() // 关闭

							if (num === 0) {
								this.changeNumVisible = false
							}

							setTimeout(() => {
								this.userCartNum = this.$store.state.userCartNum
							}, 800)


						}
					})
				}

			}, 1000),

			// 更新首页商品数量角标

			handleUpdateCardInfo(num) {
				this.info = {
					...this.info,

				}

				this.cartNum = this.info.goods_num ? this.info.goods_num + num : num
			},
			// 设置默认规格
			setDefaultSpec(info) {
				console.log('info')
				if (info.formatSpecList && info.formatSpecList.length && info.formatSpecList[0].list && info
					.formatSpecList[0].list.length) {
					console.log('默认-----', info.formatSpecList[0].list[0].title)
					return info.formatSpecList[0].list[0].title
				}
			},

			hanleShowNumChange(info) {
				//1.判断是否登录
				let isLogin = this.getIsLogin()
				if (!isLogin) {
					return false
				}
				let specList = []
				if (info.formatSpecList && info.formatSpecList.length == 1 && info.formatSpecList[0].list && info
					.formatSpecList[0].list.length == 1) {
					// 单个属性
					specList.push(info.formatSpecList[0]['list'][0].id)

				} else {
					// this.changeSpec(item.title, its.name, its.able, its.id, index)
				}
				
				if(this.info.goods_num) {
					this.info.goods_num += 1
				} else {
					this.info.goods_num= 1
				}
				
				let params = {
					goods_id: info.id,
					goods_attr: specList && specList.length && specList.join('_'),
					num: this.info.goods_num ,
					fangshi: null,
					goods_from: 1
				}
				
				if(info.formatSpecList.length == 1 && info.formatSpecList[0].list && info
					.formatSpecList[0].list.length == 1 || !info.formatSpecList) {
						params = {
							...params,
							simple: true
						}
					
				}
				this.$http.getaddcart(params).then(res => {
					if (res.status == 200) {
						this.$toast(res.mess)
						//关闭
						this.$store.dispatch('contentnum')
						this.$refs.popupRef.close() // 关闭


						// this.cartNum = this.info.goods_num ? this.info.goods_num + 1: 1
						this.cartNum = 1
						console.log('this.info----', this.info)
						setTimeout(() => {
							this.userCartNum = this.$store.state.userCartNum
						}, 800)


					}
				})
				this.changeNumVisible = true
			},
			// 获取购物车坐标
			animationAddCart(position) {
				console.log(position)

				return false

				this.animationElStatus = `position: fixed;top: ${position.detail.y}px; left: ${position.detail.x}px;`
				// this.animationElStatus = `position: fixed; z-index: 999; transition: all 1s ease; transform:  translateY(800); `
				setTimeout(() => {
					this.animationElStatus =
						`position: fixed; z-index: 999; transition: all 1s ease 2s; transform:  translate(100px, 100px);; `
				}, 1000);

				setTimeout(() => {
					// this.animationElStatus = ''
				}, 3300);
			},



		}
	}
</script>

<style lang="scss" scoped>
	.btn-group {
		display: flex;
		flex-direction: row;

		.flex1 {
			width: 50%;
			border-radius: 50px 0px 0px 50px;
			border: 0px !important;
			background-color: #ffcc14;

			&::after {
				border: 0px;
			}
		}

		.right-htn {
			margin-left: 0px !important;
			border-radius: 0px 50px 50px 0px;
			background-image: linear-gradient(to right, #ff8864, #ff2121);
		}
	}
</style>

<style lang="scss" scoped>
	@import '~uview-ui/index.scss';

	@font-face {
		font-family: pangmen;
		src: url('https://woshop-1258844920.cos.ap-nanjing.myqcloud.com/static/font/futurabq-medium_0.otf'),
	}

	@font-face {
		font-family: pangmen;
		src: url('https://woshop-1258844920.cos.ap-nanjing.myqcloud.com/static/font/nexa.ttf'),
	}

	.goodsWrap {
		background: #fff;
		border-radius: 12rpx;
		overflow: hidden;
		margin: 8rpx;
		flex-shrink: 0;

		.priceWrap {
			padding: 12rpx;

			.badeg-self {
				font-size: 10px;
				padding: 4rpx 8rpx;
				border-radius: 100rpx;
				display: inline-block;
				color: #fff;
				background-image: linear-gradient(to right, #ffa468, #fa3f3f);
				line-height: 1;
				margin-right: 8rpx;
			}

			.badeg-self2 {
				font-size: 13px;
				padding: 4rpx 8rpx;
				display: inline-block;
				color: #000;
				line-height: 1;
				margin-left: 105rpx;
			}

			.bottom {
				display: flex;
				align-items: center;
				line-height: 60rpx;

				.moreAction {
					color: #aeb4bb;
					font-weight: 800;
					font-size: 40rpx;
					letter-spacing: -4px;
					margin-right: 14rpx;
				}
			}



			.bottom1 {



				// display: flex;
				// align-items: center;
				// line-height: 60rpx;
				::v-deep .bottom-actions {
					display: flex;
					flex-direction: row;
					justify-content: flex-end;
					align-items: center;

					.uni-numbox-minus {
						border-color: #ff9900;
						color: #ff9900;
						background-color: #fff;
						border-radius: 100%;
						width: 40rpx;
						height: 40rpx;
						line-height: 40rpx !important;
						text-align: center;
						border-right: 2rpx solid #ff9900;
						position: relative;
						top: 4rpx;
					}

					.uni-numbox-value {
						border: 0px;
						color: #ff9900;
						height: 40rpx !important;

						.uni-input-input {
							height: 40rpx;
							line-height: 40rpx !important;
						}
					}

					.uni-numbox-plus {
						border: 0px;
						color: #fff;
						border-radius: 100%;
						width: 40rpx;
						height: 40rpx;
						line-height: 40rpx !important;
						text-align: center;
						background-color: #ff9900;
						position: relative;
						top: 4rpx;
					}


				}



				.attr-select-icon {
					display: flex;
					flex-direction: row;
					justify-content: flex-end;
					align-items: center;

					uni-icons {
						.uni-icons {
							background-color: #ff9900;
							color: #ff9900 !important;
						}
					}

				}
			}

			.onlyone-attr-info {
				font-size: 24rpx;
				color: #55aa7f;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				border-radius: 10rpx;
				background-color: #f0f0f0;
				padding: 4rpx 6rpx;
				margin-top: 8rpx;
				max-width: 40vw;
			}

			/deep/.goodsPrice {
				font-weight: 600;
				// color: #fa3f3f;
				font-size: 34rpx;
				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;

				// font-family: "pangmen";
				.rmb {
					font-weight: 400;
					font-size: 20rpx;
				}
			}

			.tag {
				padding: 2rpx 4rpx;
				margin: 5rpx 5rpx 5rpx 0;
			}

			.name {
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				// -webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				line-height: 1.4;
				font-size: 28rpx;
				letter-spacing: 1.75rpx;
				margin: 8rpx 0;
				color: #444;
				word-break: break-all;
			}
		}

		.coupon {
			width: 24rpx;
			height: 16rpx;
		}
	}

	.currency {
		color: #666;
		font-size: 24rpx;
		margin-left: 8rpx;
	}

	.hideCanvasView {
		height: 0rpx;
		overflow: hidden;
	}

	.swiper {
		height: 740rpx;
	}

	%Card {
		border-radius: 20rpx;
		margin: 20rpx 0;
		background-color: #fff;
		padding: 10rpx 20rpx;
	}

	.topPricePanel {
		@extend %Card;
		$color: #FE5000;

		.shopPrice {
			background-color: $color;
			color: #fff;
			padding: 2rpx 12rpx;
			border-radius: 200rpx;
			margin-left: 20rpx;
		}

		.shop-price {
			font-size: 50rpx;
			color: $color;
		}

		.market-price {
			font-size: 24rpx;
			color: rgb(144, 147, 153);

			text {
				text-decoration: line-through;
			}
		}
	}

	.pt-tip {
		display: block;
		line-height: 60rpx;
		text-align: center;
		padding: 0 0.1rem;
		color: #fff;
		background: #000;
	}

	.select {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.select-items {
		display: flex;
		flex-shrink: 0;
		padding: 4rpx 16rpx;
		background-color: #f4f4f4;
		align-items: center;
		border-radius: 10rpx;
		border: 1rpx solid #f4f4f4;

		.img {
			height: 40rpx;
			width: 40rpx;
			margin-right: 5rpx;
			padding: 5rpx;

		}
	}

	.grace-product-attr-info {
		.title {
			text {
				font-size: 26rpx;
			}
		}

		image {
			width: 200rpx;
			height: 200rpx;
			border-radius: 10rpx;
		}
	}

	.index_class .grace-footer_assemble .right-htn__active {
		line-height: 90rpx !important;
	}

	.grace-product-attr {
		height: auto !important;
		padding-bottom: 120rpx;
		position: absolute !important;
		border-radius: 24rpx 24rpx 0 0;
		width: 100%;
	}


	.grace-mask {
		position: relative !important;
	}

	.uni-countdown__splitor {
		color: #000;
	}

	.skeleton {
		height: 100vh;
		width: 100%;
		background-color: #fff;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999999;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.enterShop {
		@extend %Card;
		padding: 20upx 10upx;
	}

	.entershop-wrap {
		width: 100%;
		display: flex;
		align-items: center;
		margin-bottom: 30upx;
		padding-top: 20upx;
	}

	.entershop-wrap>image {
		border-radius: 50%;
		margin-right: 10rpx;
	}

	.entershop-wrap .entershop-middle {
		flex: 1;

		&-name {
			font-weight: 500;
		}
	}

	// 拼团
	.fight-group {
		display: flex;
		align-items: center;
		padding: 16rpx 24rpx;
		height: 87rpx;
		background: #f90cb4;
		color: #fff;
		font-size: 28rpx;
	}

	.fight-group__left {
		margin-right: 20rpx;
		font-size: 30rpx;

		i {
			font-size: 46rpx;
		}
	}

	.fight-group__middle {
		flex: 1;

		.fight-group__middle--top {
			margin-bottom: 6rpx;
			font-size: 24rpx;
		}

		.fight-group__middle--bottom {
			display: inline-block;
			height: 34rpx;
			line-height: 34rpx;
			text-decoration: line-through;
			color: rgba(255, 255, 255, 0.7)
		}
	}

	.fight-group__step {
		// height: 522rpx;
		margin-top: 20rpx;
		padding: 32rpx 0 50rpx 0;
		background: #fff;
		@extend %Card;
	}

	.fight-group__step--header {
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;
		padding: 0 24rpx;
		color: #999;
		font-size: 26rpx;

		.middle {
			flex: 1;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}

	.fight-group__step--middle {
		margin-bottom: 69rpx;
		color: #999999;
		font-size: 28rpx;
		text-align: center;

		image {
			position: relative;
			width: 104rpx;
			height: 104rpx;
			margin-bottom: 24rpx;
			border-radius: 50%;
		}

		.user-active:after {
			display: block;
			position: absolute;
			bottom: 0rpx;
			left: 50%;
			transform: translateX(-50%);
			content: '团长';
			color: #fff;
			padding: 4rpx 2rpx;
			text-align: center;
			background: #FA3F3F;
			font-size: 22rpx;
		}
	}

	.fight-group__step--list {
		display: flex;

		.step-item__active {
			color: #FA3F3F !important;
		}

		.fight-group__step--item {
			flex: 1;
			color: #999999;
			font-size: 24rpx;
			text-align: center;

			&:last-child image::after {
				display: none;
			}

			image {
				position: relative;
				z-index: 1;
				width: 40rpx;
				height: 40rpx;
				overflow: inherit !important;
				margin-bottom: 24rpx;

				&::after {
					position: absolute;
					left: 40rpx;
					top: 50%;
					width: 239rpx;
					height: 2rpx;
					background: #E8E8E8;
					content: '';
					transform: translateY(-50%);
				}
			}

			text {
				display: block;
			}
		}
	}

	.singleBuyBtn {
		background-color: #6e05e5;
		color: #fff;
		border-radius: 8rpx;
		padding: 8rpx 38rpx;
		text-align: center;
	}

	.teamBuyBtn {
		@extend .singleBuyBtn;
		background-color: #f809b4;
	}


	.tag-name {
		display: inline-block;
		font-size: 22rpx;
		border: 1rpx solid #FA3F3F;
		width: 59rpx;
		height: 29rpx;
		line-height: 29rpx;
		margin-left: 10rpx;
		text-align: center;
		border-radius: 4rpx;
		color: #FA3F3F !important;
	}

	.fight-group__list {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;

		.fight-group__list--middle {
			flex: 1;
			padding: 0 10 0 20rpx;
			color: #999;
			font-size: 24rpx;
			margin-left: 20rpx;

			h2 {
				margin-bottom: 10rpx;
				font-size: 30rpx;
				color: #444;
				font-weight: 600;
			}
		}

		image {
			width: 88rpx;
			height: 88rpx;
			margin-right: 20rpx;
			border-radius: 50%;
		}

		.fight-group__list--item {
			font-size: 24rpx;
			color: #fff;
			padding: 10rpx 20rpx;
			display: inline-block;
			text-align: center;
			border-radius: 80rpx;
			background: #ef27b4;
		}
	}

	.commetItem {
		margin-bottom: 20rpx;
		border-bottom: 1px solid #f5f5f5;

		&:last-child {
			margin-bottom: 0;
			border: none;
		}

		.head {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.leftWrap {
				display: flex;
				align-items: center;
			}

			.time {
				font-size: 24rpx;
				color: #666;
			}

			.avatar {
				display: flex;
				align-items: center;
				width: 60rpx;
				height: 60rpx;
				border-radius: 200px;
				margin-right: 20rpx;
			}
		}

		.star {
			font-size: 36rpx;
			font-weight: 800;
			color: #ff7f2b;
			margin-left: 15rpx;
			line-height: 1;
			margin-top: 10rpx;
		}

		.content {
			padding: 10rpx;
		}

		.imgWrap {
			display: flex;
			flex-wrap: wrap;

			image {
				width: 24%;
				margin-left: 4rpx;
				border-radius: 12rpx;
			}
		}
	}

	.bgCircle {
		border-radius: 16rpx;
		overflow: hidden;
		background-color: #fff;

	}

	.productNameWrap {
		padding: 12rpx 0;
		@extend .bgCircle
	}

	.goodsPrice {
		font-size: 42rpx;
		font-weight: 600;
	}

	.productBuyBtn {
		position: relative;
		text-align: center;
		width: 180rpx;
		padding: 20rpx 0;
		background: #ffcc14;
		color: #fff;
		border-radius: 200px;

		// &.leftBtn {
		//   background-color: #ffcc14;
		//   border-top-right-radius: 0;
		//   border-bottom-right-radius: 0;
		// }

	}

	.badge {
		position: absolute;
		top: -8px;
		right: -5px;
		background-color: red;
		color: white;
		border-radius: 50%;
		padding: 3px 6px;
		font-size: 15px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.param-table {
		/deep/ .param-title {
			font-weight: bold;
		}
	}

	.footerWrap {
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #fff;
		z-index: 999;
	}

	.rightMenu {
		position: fixed;
		bottom: 140rpx;
		right: 20rpx;
		display: flex;
		flex-direction: column;

		.weshareBtn {
			width: 80rpx;
			height: 80rpx;
			background-color: transparent;
			padding: 0;
			margin-bottom: 20rpx;

			&::after {
				border: none;
			}
		}

		&icon {
			width: 70rpx;
			height: 70rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: rgba(#fff, 0.2);
			border: 2rpx solid #dedede;
			border-radius: 200rpx;
			margin-bottom: 20rpx;
		}
	}


	.order-shop {

		@extend %Card;

		.order_list {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 0;

			.juan {
				display: flex;

				text {
					font-size: 28rpx;
					color: #303133;

					&:nth-child(1) {
						font-weight: 500;
					}

					;

					&:nth-child(2),
					&:nth-child(3) {
						color: #606266;
					}
				}

				.color {
					color: #f44336;
				}
			}

			.order_color {
				font-size: 26rpx;
				color: #333;
			}
		}
	}

	.grace-time-press {
		@extend %Card;
		margin: 0 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.datatime-left {
			font-size: 24rpx;
			color: #FF0036;
			display: flex;
			align-items: center;

			.grace-countdown {
				.grace-countdown-numbers {
					border: 0 !important;
					padding: 0 !important;
					margin: 0 !important;
				}
			}
		}

		.progress-right {
			position: relative;
			width: 230rpx;
			height: 30rpx;
			background: rgba(255, 67, 55, 0.2);
			font-size: 24rpx;
			color: #fff;
			text-align: center;
			line-height: 30rpx;
			border-radius: 15rpx;

			.active-pro {
				position: absolute;
				height: 30rpx;
				left: 0;
				top: 0;
				border-radius: 15rpx;
				background-color: #ff3333;
				opaity: 0.5;
			}
		}
	}

	.buyTeamWrap {
		padding: 38rpx;
		text-align: center;

		.title {
			font-size: 30rpx;
		}

		.remainder {
			color: #666;
			margin: 14rpx 0 28rpx;
		}
	}

	.grace-form {
		.grace-items {
			align-items: center;
		}

		.grace-product-attr-btn {
			width: 100%;
		}
	}

	.disable-spec-tiem {
		border: 2rpx dashed #bbb;
	}

	.shopInfoRecommend {
		width: 25%;
		padding: 10upx;
		flex-direction: column;
	}

	.grace-product-info {
		margin-bottom: 6px;
		padding: 20upx 15upx 0;

		.u-item-title {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			font-size: 30upx;
			font-weight: 500;

			.u-item-title-left {
				width: 6rpx;
				height: 30rpx;
				margin-right: 20rpx;
				background-image: linear-gradient(to bottom, #fa3f3f, #ffa468);
			}

			.comment-count {
				font-weight: 400;
				font-size: 24upx;
				display: inline-block;
				margin-left: 20upx;
				color: #666;
			}
		}


	}


	.headTablist {
		.headTabItem {
			color: #fff;
			padding: 10upx;
			font-size: 32upx;
			font-weight: 500;
			position: relative;
			transition: all 0.3s;

			&.headTabActive {
				font-size: 38upx;
				font-weight: 800;

				&::after {
					content: ' ';
					width: 40upx;
					height: 8upx;
					background-color: #fff;
					position: absolute;
					bottom: 0;
					left: 0;
					transform: translateX(84%);
					border-radius: 100upx;
				}
			}
		}
	}

	.fw2 {
		width: 85%;
	}

	.grace-checked-color3 {
		background-color: #FFFFFF !important;
		border: 1rpx solid #FA3F3F !important;
		color: #FA3F3F;
	}

	//优惠  活动  服务
	.popup-coupon {
		height: 70rpx;
		width: 100%;
		border-radius: 20rpx 20rpx 0 0;
		background-color: #fff;
		position: relative;
		border-radius: 20rpx 20rpx 0 0;

		.popup-title {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 30rpx;
			text-align: center;
		}

		.coupon-list {
			padding: 0 30rpx;
			overflow-y: scroll !important;
			width: 100%;
			height: calc(100% - 180rpx);
			position: absolute;
			top: 80rpx;
			left: 0;

			.items {
				width: 100%;
				height: 150rpx;
				background: linear-gradient(231deg, rgba(241, 79, 69, 0.2) 0%, rgba(250, 107, 81, 0.2) 100%);
				border-radius: 10rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 20rpx;

				.coupon-left {
					width: 70%;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-evenly;
					text-align: left;
					padding-left: 20rpx;

					text {
						font-size: 24rpx;
						color: #FA3F3F;
					}

					>view {
						font-size: 28rpx;
						color: #FA3F3F;

						>text {
							font-size: 40rpx;
						}
					}

				}

				.coupon-right {
					width: 30%;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					border-left: 1rpx dashed #fff;
					position: relative;

					&::before,
					&::after {
						content: '';
						display: block;
						width: 20rpx;
						height: 20rpx;
						background-color: #fff;
						border-radius: 50%;
						position: absolute;
						left: -10rpx;

					}

					&::before {
						top: -10rpx;
					}

					&::after {
						bottom: -10rpx;
					}

					text {
						display: block;
						width: 164rpx;
						height: 60rpx;
						background-color: #FA3F3F;
						font-size: 28rpx;
						color: #fff;
						line-height: 60rpx;
						text-align: center;
						border-radius: 30rpx;
					}
				}
			}

			.cuxiao {
				display: flex;
				// align-items: center;
				justify-content: flex-start;

				.title {
					width: 80rpx;
					height: 30rpx;
					line-height: 30rpx;
					text-align: center;
					font-size: 20rpx;
					display: block;
					background: rgba(250, 63, 63, 0.1);
					border-radius: 20rpx;
					color: #FA3F3F;
				}

				.content {
					flex: 1;

					>view {
						padding-left: 20rpx;
						text-align: left;
						font-size: 20rpx;
					}
				}
			}

			.guarantee {
				display: flex;
				margin-bottom: 40rpx;

				&:last-child {
					margin-bottom: 10rpx;
				}

				image {
					width: 30rpx;
					height: 30rpx;
					background-color: #FA3F3F;
					border-radius: 50%;
				}

				.guar-cont {
					flex: 1;
					padding-left: 30rpx;

					>view {
						text-align: left;
						font-size: 22rpx;
					}
				}

			}
		}

		.uniattr {
			overflow-y: scroll !important;

			.items {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				padding: 30rpx 0;
				height: auto !important;
				// line-height: 80rpx;
				background: transparent !important;
				margin: 0;
				width: 100% !important;
				border-bottom: 1rpx solid #F4F4F4;

				text {
					font-size: 28rpx;
					color: #333;
					display: block;
					text-align: left;

					&:nth-child(1) {
						width: 20%;
					}

					&:nth-child(2) {
						padding-left: 20rpx;
						width: 80%;
						color: #999999;
					}
				}

			}
		}

		.popup-com {
			width: 100%;
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0 30rpx;
			position: absolute;
			bottom: 0;
			left: 0;

			button {
				width: 100%;
				border-radius: 40rpx;
				height: 80rpx;
				line-height: 80rpx;
				background-color: #FA3F3F;
				text-align: center;
				color: #fff;
			}
		}

	}

	#animation-el {
		height: 60rpx;
		width: 60rpx;
		border-radius: 100rpx;
		overflow: hidden;

		img {
			width: 100%;
			height: 100%;
		}

	}
</style>